<template>
	<transition name="fade">
		<div id="play">
			<button class="back_btn" @click="gdBack">
				<i class="iconfont icon-fanhui"></i>
			</button>
			<div class="playBg" v-for="s in songs" :style="{background: 'url('+s.al.picUrl+')', backgroundSize:'100% 100%'}">
			</div>
			
			<div class="playImg" v-for="s in songs" :class="{ani:flag}" @click="stopOrPlay">
				<img :src="s.al.picUrl"/>
				<i class="iconfont" :class="[flag ? 'icon-zanting' : 'icon-bofang']"></i>
			</div>
			<div class="icon" v-for="s in songs">
				<i class="iconfont icon-xin" ></i>
				<i class="iconfont icon-unie122"></i>
				<i class="iconfont icon-linedesign-01 PL" @click="toPl(s.id)"></i>
				<i class="iconfont icon-gengduo1"></i>
			</div>
			<div class="lyricBox">
				<div class="lyric">
					<p v-for="(line,index) in lyric.lines" :class="{'current':currentLineNum===index}" class="text">{{line.txt}}</p>
				</div>
			</div>
		</div>
	</transition>
	
	   
</template>

<script>
	
	import player from "../components/player.vue";	
	import axios from 'axios';
	import Lyric from 'lyric-parser';
	
    export default {
    	components:{
    		player,
    	},
    	methods:{
    		gdBack(){
				this.$router.go(-1);
				console.log(this)
				this.$parent.flag=true;
			},
			toPl(id){
				console.log("id",id)
				this.$router.push({path:"/songPl",query:{id:id}})
			},
			stopOrPlay(){
				this.flag = !this.flag;
				this.$parent.$refs.player.playOrPause();
			},
			lyrmove({lineNum, txt}){
				this.currentLineNum = lineNum
			}
    	},
    	beforeMount(){
    		var id = this.$route.query.id
    		axios.get("https://netease.bluej.cn/song/detail?timestamp=13&ids="+id).then((res)=>{
					this.songs = res.data.songs;
					console.log("歌曲详情",res)
			});
			axios.get("https://netease.bluej.cn/lyric?timestamp=13&id="+id).then((res)=>{
				this.lyric = new Lyric(res.data.lrc.lyric,this.lyrmove);
				console.log("歌词",this.lyric)
				this.lyric.play();
			})
			
    	},
    	data(){
    		return{
    			songs:[],
    			flag:true,
    			lyric:"",
    			currentLineNum:0
    		}
    	},
    	watch:{
    		currentLineNum(newvalue,oldvalue){
    			console.log(oldvalue,newvalue);
    			var topD = oldvalue * -30 + "px";
    			$(".lyric")[0].style.top = topD;
    		}
    	}
    }
	
	
</script>

<style lang="scss">
	.fade-enter-active, .fade-leave-active {
	  transition: all 1s ease;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	  transform: translateY(100%);
	}
	#play{
		height: 100%;
		position: relative;
		.back_btn{
			position: absolute;
			z-index: 10;
			background: none;
			outline: none;
			border: none;
			top:10px;
			left:20px;
			
			i{
				font-size: 30px;
				color: #D43C33;
			}
		}
		.playBg{
			height: 100%;
			 -webkit-filter:brightness(20%) blur(5px);
   			 filter:brightness(20%) blur(5px);
		}
		.playImg{
			position: absolute;
			top:100px;
			height:40vw;
			width: 40vw;
			border-radius: 50%;
			overflow: hidden;
			left: 50%;
			transform: translateX(-50%);
			transform-origin: left;
			border:30px solid black ;
			img{
				width: 100%;
				border-radius: 50%;
			}
			i{
				position: absolute;
				top: 50%;
				transform:translateX(-50%) translateY(-50%);
				font-size: 50px;
				left: 50%;
				-webkit-text-stroke: 2px #DEDEDE;
				color: #D43C33;
			}
		}
		.icon{
			margin-left: 5%;
			position: absolute;
			top: 57%;
			width: 90%;
			display: flex;
			justify-content: space-around;
			i{
				color: #D43C33;
				font-size: 25px;
			}
			
		}
		
		.ani{
			animation: rota 9s linear infinite;
		}
		
		.lyricBox{
			height: 150px;
			width: 100%;
			overflow: hidden;
			position: absolute;
			bottom: 15vw;
			.lyric{
				top: 0;
			    position: absolute;
			    width: 100%;
			    
				.text{
					color: #C8C8CD;
					font-size: 15px;
					line-height: 30px;
					height: 30px;
				}
				.current{
					color: red;
				}
			}
		}
		
		
		
		
	}
	
	@keyframes rota{
		from{
			transform: rotate(0) translateX(-50%);
		}
		to{
			transform: rotate(360deg) translateX(-50%);
			
		}
	}
</style>